<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定</title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 分支结构
				语法: 
					1.v-if   	 如果为真则展现标签
					2.v-else-if  必须与v-if连用
					3.v-else 	 必须与v-if连用	取反
				案例:
					要求: 按照用户的考试成绩 评级
						  >=90分  优秀
						  >=80分  良好
						  >=70分  中等
						  >=60分  及格
						  否则    不及格
			 -->
			<h3>评级</h3>
			请录入分数: <input type="number" v-model="score" />
			<div v-if="score >= 90 ">优秀</div>
			<div v-else-if="score >= 80 ">良好</div>
			<div v-else-if="score >= 70 ">中等</div>
			<div v-else-if="score >= 60 ">及格</div>
			<div v-else>不及格</div>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					score: 70
				}
			})
		</script>	
	</body>
</html>
